<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D立体倒计时</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #1a1a1a, #2d3436);
            font-family: 'Arial', sans-serif;
            perspective: 1000px;
        }

        .countdown-container {
            text-align: center;
            transform-style: preserve-3d;
        }

        .title {
            color: #fff;
            margin-bottom: 2rem;
            font-size: 2em;
            text-shadow: 0 0 10px rgba(255,255,255,0.3);
        }

        .numbers-container {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        .number-box {
            position: relative;
            width: 120px;
            height: 160px;
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }

        .number-face {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4em;
            font-weight: bold;
            color: #fff;
            background: linear-gradient(45deg, #2980b9, #3498db);
            border: 2px solid rgba(255,255,255,0.1);
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
            backface-visibility: hidden;
        }

        /* 3D面的定位 */
        .front { transform: translateZ(30px); }
        .back { transform: rotateY(180deg) translateZ(30px); }
        .top { transform: rotateX(90deg) translateZ(30px); }
        .bottom { transform: rotateX(-90deg) translateZ(30px); }
        .left { transform: rotateY(-90deg) translateZ(30px); }
        .right { transform: rotateY(90deg) translateZ(30px); }

        .label {
            color: #fff;
            font-size: 1.2em;
            margin-top: 20px;
            text-shadow: 0 0 5px rgba(255,255,255,0.3);
        }

        .unit-container {
            text-align: center;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* 金属质感 */
        .number-face {
            background: linear-gradient(135deg, 
                rgba(41, 128, 185, 0.9),
                rgba(52, 152, 219, 0.9)
            );
            border-radius: 10px;
            box-shadow: 
                inset 0 0 20px rgba(255,255,255,0.2),
                0 0 20px rgba(52, 152, 219, 0.5);
        }

        /* 悬浮效果 */
        .number-box:hover {
            transform: rotateY(360deg);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .numbers-container {
                flex-wrap: wrap;
            }
            .number-box {
                width: 80px;
                height: 120px;
            }
            .number-face {
                font-size: 2.5em;
            }
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <h1 class="title">2025年春节倒计时</h1>
        <div class="numbers-container">
            <div class="unit-container">
                <div class="number-box" id="days-box">
                    <div class="number-face front">00</div>
                    <div class="number-face back">00</div>
                    <div class="number-face top">00</div>
                    <div class="number-face bottom">00</div>
                    <div class="number-face left">00</div>
                    <div class="number-face right">00</div>
                </div>
                <div class="label">天</div>
            </div>
            <div class="unit-container">
                <div class="number-box" id="hours-box">
                    <div class="number-face front">00</div>
                    <div class="number-face back">00</div>
                    <div class="number-face top">00</div>
                    <div class="number-face bottom">00</div>
                    <div class="number-face left">00</div>
                    <div class="number-face right">00</div>
                </div>
                <div class="label">时</div>
            </div>
            <div class="unit-container">
                <div class="number-box" id="minutes-box">
                    <div class="number-face front">00</div>
                    <div class="number-face back">00</div>
                    <div class="number-face top">00</div>
                    <div class="number-face bottom">00</div>
                    <div class="number-face left">00</div>
                    <div class="number-face right">00</div>
                </div>
                <div class="label">分</div>
            </div>
            <div class="unit-container">
                <div class="number-box" id="seconds-box">
                    <div class="number-face front">00</div>
                    <div class="number-face back">00</div>
                    <div class="number-face top">00</div>
                    <div class="number-face bottom">00</div>
                    <div class="number-face left">00</div>
                    <div class="number-face right">00</div>
                </div>
                <div class="label">秒</div>
            </div>
        </div>
    </div>

    <script>
        function updateBox(boxId, value) {
            const faces = document.querySelectorAll(`#${boxId} .number-face`);
            const paddedValue = value.toString().padStart(2, '0');
            faces.forEach(face => {
                face.textContent = paddedValue;
            });
        }

        function updateCountdown() {
            const targetDate = new Date('2026-02-17T00:00:00'); // 2026年春节
            const now = new Date();
            const diff = targetDate - now;

            if (diff <= 0) {
                document.querySelector('.title').textContent = '新年快乐！';
                return;
            }

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            // 更新数字
            updateBox('days-box', days);
            updateBox('hours-box', hours);
            updateBox('minutes-box', minutes);
            updateBox('seconds-box', seconds);

            // 只在秒数为0时（即每分钟开始时）添加旋转动画
            if (seconds === 0) {
                const boxes = document.querySelectorAll('.number-box');
                boxes.forEach(box => {
                    box.style.transition = 'transform 1.5s ease-in-out';
                    box.style.transform = 'rotateY(360deg)';
                    
                    // 动画结束后重置
                    setTimeout(() => {
                        box.style.transition = 'transform 0.6s';
                        box.style.transform = 'rotateY(0deg)';
                    }, 1500);
                });
            }
        }

        // 初始更新
        updateCountdown();
        // 每秒更新一次
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
